<template>
  <view class="item">
    <view @click="getDetails()">
      <view class="sn">
        <view class="dis">
          <text class="label">订单编号：</text>
          <text>{{ i.sn }}</text>
        </view>
        <uni-icons type="right" size="14"></uni-icons>
      </view>
      <view class="name">
        <view class="label label_gray">客户名称：</view>
        <view class="value">{{ i.purchaserName }}</view>
      </view>
      <view class="name">
        <view class="label label_gray">客户编号：</view>
        <view class="value">{{ i.businessCode }}</view>
      </view>
      <view class="price">
        <view class="label label_gray">订单金额：</view>
        <view class="label_red">￥{{ i.flowPrice }}</view>
      </view>
      <view class="price" v-if="i.outboundPrice">
        <view class="label label_gray">出库金额：</view>
        <view class="label_red">￥{{ i.outboundPrice }}</view>
      </view>
      <view class="status">
        <view class="label label_gray">提单状态：</view>
        <view
          :class="
            i.orderStatus === 'COMPLETED'
              ? 'label_gray'
              : i.orderStatus === 'DELIVERED'
              ? 'label_blue'
              : i.orderStatus === 'UNPAID'
              ? 'label_red'
              : i.orderStatus === 'UNDELIVERED'
              ? 'label_red'
              : ''
          "
        >
          {{
            i.orderStatus === 'COMPLETED'
              ? '已完成'
              : i.orderStatus === 'DELIVERED'
              ? '已出库'
              : i.orderStatus === 'UNPAID'
              ? '未支付'
              : i.orderStatus === 'UNDELIVERED'
              ? '未发货'
              : ''
          }}
        </view>
      </view>
    </view>

    <!-- <view class="btn" v-if="i.orderStatus === 'UNPAID' || i.orderStatus === 'UNDELIVERED'"> -->
    <view class="btn" v-if="i.allowOperationVO.cancel">
      <view class="cancel" @click="cancelOrder"> 取消订单 </view>
    </view>
    <view class="btn" v-if="i.allowOperationVO.rog">
      <view class="cancel" @click="confirmReceipt"> 确认收货 </view>
    </view>

    <Dialog
      :dialog="dialog"
      :content="content"
      @cancel="dialog = false"
      @confirm="confirmCancelOrder"
    >
      <!-- <view class="slotValue">
        取消原因：<input type="text" v-model="reason" placeholder="请输入取消原因" />
      </view> -->
    </Dialog>
  </view>
</template>

<script>
import { cancelOrder, receipt } from '@/api/invoicer'
import Dialog from '@/components/dialog'
export default {
  components: { Dialog },
  props: {
    i: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialog: false,
      content: ''
    }
  },
  methods: {
    getDetails(sn) {
      let title =
        this.i.orderStatus === 'COMPLETED'
          ? '已完成'
          : this.i.orderStatus === 'DELIVERED'
          ? '已出库'
          : this.i.orderStatus === 'UNPAID'
          ? '未出库'
          : this.i.orderStatus === 'UNDELIVERED'
          ? '未出库'
          : ''

      uni.navigateTo({ url: `/invoicer/orderDetail?sn=${this.i.sn}&title=${title}` })
    },
    cancelOrder() {
      this.dialog = true
      this.content = '确认取消订单吗？'
    },
    confirmCancelOrder() {
      if (this.i.allowOperationVO.cancel) {
        cancelOrder(this.i.sn, { reason: '' })
          .then(r => {
            if (r.code === 200) {
              this.$emit('insideEvent')
            }
          })
          .finlly(() => {
            this.dialog = false
          })
      }
      if (this.i.allowOperationVO.rog) {
        receipt(this.i.sn)
          .then(r => {
            if (r.code === 200) {
              this.$emit('insideEvent')
            }
          })
          .finlly(() => {
            this.dialog = false
          })
      }
    },
    confirmReceipt() {
      this.dialog = true
      this.content = '确认收货了吗？'
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  background: #fff;
  padding: 36rpx 25rpx;
  margin: 20.83rpx 25rpx;
  border-radius: 11rpx;
  font-size: 29rpx;
  .label {
    display: inline-block;
    width: 160rpx;
  }
  .label_gray {
    color: #8d8d8d;
  }
  .label_red {
    color: #ef231b;
  }
  .label_blue {
    color: #2871fc;
  }
  .sn {
    display: flex;
    justify-content: space-between;
  }
  .name,
  .price,
  .status {
    display: flex;
    margin-top: 34rpx;
    line-height: 1;
    .value {
      width: 70%;
    }
  }
  .btn {
    display: flex;
    justify-content: flex-end;
    .cancel {
      width: 142rpx;
      height: 58rpx;
      line-height: 56rpx;
      font-size: 25rpx;
      color: #585858;
      text-align: center;
      border-radius: 29rpx;
      border: 1px solid #585858;
      margin-top: 24rpx;
    }
  }
}
.slotValue {
  display: flex;
  align-items: center;
  width: 80%;
  margin: 2rpx auto 30rpx;
  input {
    height: 60rpx;
    background: #f9f9f9;
    padding: 0 10rpx;
  }
}
</style>
